<template>
  <el-container>
    <!-- 头部区域,定义了操作栏和众多dialog -->
    <el-header>
      <el-row>
        <el-col :span="24">
          <el-tabs @tab-click="handleToolbarClick">
            <!-- ============================================= 工具操作栏 ============================================= -->
            <el-tab-pane label="工具" name="toolOps" :disabled="true">
              <el-button type="text">点选模式</el-button>
              <el-button type="text">框选模式</el-button>
              <el-button type="text">窗口内显示</el-button>
            </el-tab-pane>

            <!-- ============================================= 数据操作栏 ============================================= -->
            <el-tab-pane label="数据" name="dataOps" :disabled="true">
              <el-button type="text">简单关系对</el-button>
              <el-button type="text">点边关系数据</el-button>
              <el-button type="text">JSON数据设置</el-button>
              <el-button type="text">Gephi文件</el-button>
              <el-button type="text">服务接口</el-button>
              <el-button type="text">内置数据</el-button>
            </el-tab-pane>

            <!-- ============================================= 编辑操作栏 ============================================= -->
            <el-tab-pane label="编辑" name="editOps">
              <el-button type="text" @click="editorOpClick('allSelect')"
                >全选</el-button
              >
              <el-button type="text" @click="editorOpClick('rebackSel')"
                >反选</el-button
              >
              <el-button type="text" @click="editorOpClick('selRelate')"
                ><span class="warning">显示选中</span></el-button
              >
              <el-button type="text" @click="editorOpClick('hideSelNode')"
                ><span class="warning">隐藏选中</span></el-button
              >
              <el-button type="text" @click="editorOpClick('showAll')"
                >显示全部</el-button
              >
              <el-button type="text" @click="editorOpClick('delSelect')"
                ><span class="warning">删除选中</span></el-button
              >
              <el-button type="text" @click="editorOpClick('hideIsolatedNodes')"
                >隐藏孤立点</el-button
              >
              <el-button type="text" @click="editorOpClick('clearAll')"
                >清空数据</el-button
              >
              <el-button type="text" @click="initCanvas"
                ><span class="danger">恢复数据</span></el-button
              >
            </el-tab-pane>

            <!-- ============================================= 分析操作栏 ============================================= -->
            <el-tab-pane label="分析" name="analyzeOps">
              <el-button type="text" @click="relationAnalyzeDialog = true"
                >列表分析</el-button
              >
              <el-button type="text" @click="nLayerRelatesDialog = true"
                >连接分析</el-button
              >
              <el-button type="text" @click="pathAnalyzeDialog = true"
                >路径分析</el-button
              >
              <el-button type="text" @click="findShortPathDialog = true"
                >最短路径</el-button
              >

              <el-button type="text" @click="nodeFindDialog = true"
                >查找节点</el-button
              >

              <el-button
                type="text"
                @click="findNodeCyclePathDialog = true"
                disabled
                >查找环</el-button
              >
              <el-button type="text" @click="nodeMapSizeByDegreeDialog = true"
                >节点缩放</el-button
              >
              <el-button type="text" @click="applyLinkWeightDialog = true"
                >边缩放</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" @click="openNodeInfoDialog()"
                ><span class="warning">节点信息</span></el-button
              >
              <el-button type="text" @click="openNodeEditDialog()"
                ><span class="warning">编辑节点</span></el-button
              >
              <el-button type="text" disabled
                ><span class="warning">删除节点</span></el-button
              >
              <el-button type="text" @click="nodeAddDialog = true"
                >添加节点</el-button
              >
              <el-button type="text" @click="nodeHide()"
                ><span class="warning">隐藏节点</span></el-button
              >
              <el-button type="text" @click="linkCreating()"
                ><span class="warning">新建连接</span></el-button
              >
              <el-button type="text" @click="highlightRelatives()"
                ><span class="warning">高亮关联节点</span></el-button
              >
              <el-button type="text" @click="outNodesContract()"
                ><span class="warning">收起子节点</span></el-button
              >
              <el-button type="text" @click="outNodesExpanded()"
                ><span class="warning">展开子节点</span></el-button
              >
              <el-button type="text" @click="openLinkEditDialog()"
                ><span class="warning">编辑连线</span></el-button
              >
              <el-button type="text" disabled
                ><span class="warning">删除连线</span></el-button
              >
              <el-button type="text" @click="linkHide()"
                ><span class="warning">隐藏连线</span></el-button
              >
              <el-button type="text" @click="openLinkConfigDialog()"
                ><span class="warning">连线配置</span></el-button
              >
            </el-tab-pane>

            <!-- ============================================= 布局设置操作栏 ============================================= -->
            <el-tab-pane label="布局设置" name="layoutOps"></el-tab-pane>

            <!-- ============================================= 社区发现操作栏 ============================================= -->
            <el-tab-pane label="社区发现" name="clusterOps"></el-tab-pane>

            <!-- ============================================= 筛选操作栏 ============================================= -->
            <el-tab-pane label="筛选" name="filterOps"></el-tab-pane>

            <!-- ============================================= 配置操作栏 ============================================= -->
            <el-tab-pane label="配置" name="configOps"></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>

      <!-- ============================================= 编辑操作栏dialog域 ============================================= -->

      <!-- ============================================= 分析操作栏dialog域 ============================================= -->
      <div>
        <!-- 分析-列表分析dialog -->
        <el-dialog title="列表分析" :visible.sync="relationAnalyzeDialog">
          <el-input
            placeholder="后续做一个搜索,包括与右键菜单联动"
            v-model="relationAnalyzeInput"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="relationAnalyzeFilter"
            ></el-button>
          </el-input>
          <el-tabs>
            <el-tab-pane label="nodes" name="nodes">
              <el-table :data="relationAnalyzeData.nodes">
                <el-table-column property="id" label="id"></el-table-column>
                <el-table-column
                  property="label"
                  label="label"
                  :filter-method="relationAnalyzeFilter"
                ></el-table-column>
                <el-table-column property="type" label="type"></el-table-column>
                <el-table-column label="allLinks">
                  <template slot-scope="scope">
                    {{
                      Number(scope.row.inLinks.length) +
                      Number(scope.row.outLinks.length)
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="inLinks">
                  <template slot-scope="scope">
                    {{ scope.row.inLinks.length }}
                  </template>
                </el-table-column>
                <el-table-column label="outLinks">
                  <template slot-scope="scope">
                    {{ scope.row.outLinks.length }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="links" name="links">
              <el-table :data="relationAnalyzeData.links">
                <!-- <el-table-column property="id" label="id"></el-table-column> -->
                <el-table-column
                  property="source.label"
                  label="source"
                  :filter-method="relationAnalyzeFilter"
                ></el-table-column>
                <el-table-column
                  property="target.label"
                  label="target"
                  :filter-method="relationAnalyzeFilter"
                ></el-table-column>
                <el-table-column
                  property="label"
                  label="label"
                ></el-table-column>
                <el-table-column label="type">
                  <template slot-scope="scope">
                    {{ scope.row.type || 'default' }}
                  </template>
                </el-table-column>
                <el-table-column
                  property="weight"
                  label="weight"
                ></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-dialog>

        <!-- 分析-连接分析 -->
        <el-dialog title="连接分析" :visible.sync="nLayerRelatesDialog">
          <el-form :model="nLayerRelatesForm">
            <el-form-item label="节点名称">
              <el-input
                v-model="nLayerRelatesForm.label"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="N层关系">
              <el-input
                v-model="nLayerRelatesForm.deepth"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="nLayerRelatesDialog = false">取 消</el-button>
            <el-button type="primary" @click="nLayerRelatesClick"
              >查找N层关系</el-button
            >
          </div>
        </el-dialog>

        <!-- 分析-路径分析dialog -->
        <el-dialog
          title="分析两点间的联通路径"
          :visible.sync="pathAnalyzeDialog"
        >
          <el-form :model="pathAnalyzeForm">
            <el-form-item label="起始节点">
              <el-input
                v-model="pathAnalyzeForm.sourceLabel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="目标节点">
              <el-input
                v-model="pathAnalyzeForm.targetLabel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="关系方向">
              <el-select
                v-model="pathAnalyzeForm.direction"
                placeholder="请选择关系方向"
              >
                <el-option label="正向" value="source"></el-option>
                <el-option label="反向" value="target"></el-option>
                <el-option label="不区分方向" value="all"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pathAnalyzeClick()"
              >查找连通路径</el-button
            >
          </div>
        </el-dialog>

        <!-- 分析-最短路径dialog -->
        <el-dialog
          title="分析两点间的最短联通路径"
          :visible.sync="findShortPathDialog"
        >
          <el-form :model="findShortPathForm">
            <el-form-item label="起始节点">
              <el-input
                v-model="findShortPathForm.sourceLabel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="目标节点">
              <el-input
                v-model="findShortPathForm.targetLabel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="关系方向">
              <el-select
                v-model="findShortPathForm.direction"
                placeholder="请选择关系方向"
              >
                <el-option label="正向" value="source"></el-option>
                <el-option label="反向" value="target"></el-option>
                <el-option label="不区分方向" value="all"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="findShortPathClick()"
              >查找最短路径</el-button
            >
          </div>
        </el-dialog>

        <!-- 查找节点 -->
        <el-dialog
          title="查找节点"
          :visible.sync="nodeFindDialog"
          width="50%"
          @close="nodeFindDialogClose"
          :close-on-click-modal="false"
        >
          <el-form :model="nodeFindForm" label-width="80px">
            <el-form-item label="属性">
              <el-select v-model="nodeFindForm.label" placeholder="请选择属性">
                <el-option
                  :label="item.label"
                  :value="item.label"
                  v-for="item in nodeFindProperties"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="属性值">
              <el-input v-model="nodeFindForm.value" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="nodeFindDialogClose()">取 消</el-button>
              <el-button type="primary" @click="findNodeClick()"
                >搜 索</el-button
              >
            </span>
          </template>
        </el-dialog>

        <!-- 分析-查找环dialog -->
        <el-dialog
          title="查找指定点的环路"
          :visible.sync="findNodeCyclePathDialog"
        >
          <el-form :model="findNodeCyclePathForm">
            <el-form-item label="目标点">
              <el-input
                v-model="findNodeCyclePathForm.label"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="findNodeCyclePathClick()"
              >查找环路</el-button
            >
          </div>
        </el-dialog>

        <!-- 分析-节点缩放dialog -->
        <el-dialog
          title="节点大小按照属性映射"
          :visible.sync="nodeMapSizeByDegreeDialog"
        >
          <el-form :model="nodeMapSizeByDegreeForm">
            <el-form-item label="最小值">
              <el-input
                v-model="nodeMapSizeByDegreeForm.min"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="最大值">
              <el-input
                v-model="nodeMapSizeByDegreeForm.max"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="属性">
              <el-select
                v-model="nodeMapSizeByDegreeForm.checkedProp"
                placeholder="请选择缩放属性"
              >
                <el-option
                  v-for="prop in nodeMapSizeByDegreeForm.props"
                  :key="prop.value"
                  :label="prop.label"
                  :value="prop.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="nodeMapSizeByDegreeClick()"
              >确定</el-button
            >
          </div>
        </el-dialog>

        <!-- 分析-边缩放dialog -->
        <el-dialog
          title="边按照权重映射宽度"
          :visible.sync="applyLinkWeightDialog"
        >
          <el-form :model="applyLinkWeightForm">
            <el-form-item label="最小值">
              <el-input
                v-model="applyLinkWeightForm.min"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="最大值">
              <el-input
                v-model="applyLinkWeightForm.max"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <!-- visgraph.applyLinkWeight([b, c]); -->
            <el-button type="primary" @click="applyLinkWeightClick()"
              >确定</el-button
            >
          </div>
        </el-dialog>

        <!-- 节点信息 -->
        <el-dialog
          title="节点信息"
          :visible.sync="nodeInfoDialog"
          width="50%"
          :close-on-click-modal="false"
        >
          <el-tabs>
            <el-tab-pane label="基本信息" name="info">
              <el-form :model="nodeInfoForm" label-width="140px">
                <el-form-item label="类型"
                  ><el-input v-model="nodeInfoForm.type"></el-input
                ></el-form-item>
                <el-form-item label="群组"
                  ><el-input v-model="nodeInfoForm.cluster"></el-input
                ></el-form-item>
                <el-form-item label="形状">
                  <el-input v-model="nodeInfoForm.shape"></el-input>
                </el-form-item>
                <el-form-item label="半径"
                  ><el-input v-model="nodeInfoForm.radius"></el-input
                ></el-form-item>

                <el-form-item label="名称"
                  ><el-input v-model="nodeInfoForm.label"></el-input
                ></el-form-item>
                <el-form-item label="透明度"
                  ><el-input v-model="nodeInfoForm.alpha"></el-input
                ></el-form-item>
                <el-form-item label="填充颜色"
                  ><el-input v-model="nodeInfoForm.fillColor"></el-input
                ></el-form-item>
                <el-form-item label="字体颜色"
                  ><el-input v-model="nodeInfoForm.fontColor"></el-input
                ></el-form-item>
                <!--      <el-form-item label="wrapText"
              ><el-input v-model="nodeInfoForm.wrapText"></el-input
            ></el-form-item> -->
                <!--         <el-form-item label="lineDash"
              ><el-input v-model="nodeInfoForm.lineDash"></el-input
            ></el-form-item> -->
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="关联关系" name="relatives" :lazy="true">
              <div v-if="nodeInfoForm.inLinks.length">
                <el-button-group
                  style="margin: 15px 0px"
                  icon="el-icon-arrow-left"
                  v-for="(edge, index) in nodeInfoForm.inLinks"
                  :key="index"
                >
                  <el-badge :value="edge.label">
                    <el-button type="primary" circle>{{
                      edge.source.label
                    }}</el-button>
                  </el-badge>
                  <el-divider direction="vertical"></el-divider>
                </el-button-group>
              </div>
              <br />
              <div v-if="nodeInfoForm.outLinks.length">
                <el-button-group
                  icon="el-icon-arrow-right"
                  v-for="(edge, index) in nodeInfoForm.outLinks"
                  :key="index"
                  ><el-badge :value="edge.label">
                    <el-button type="success" circle>{{
                      edge.target.label
                    }}</el-button>
                    <el-divider direction="vertical"></el-divider>
                  </el-badge>
                </el-button-group>
              </div>
            </el-tab-pane>
            <!--  <el-tab-pane label="属性" name="attrs" :lazy="true">
          form1 属性名,属性值
        </el-tab-pane> -->
          </el-tabs>
        </el-dialog>

        <!-- 修改节点 -->
        <el-dialog
          title="修改知识节点"
          :visible.sync="noteEditDialog"
          width="50%"
          :close-on-click-modal="false"
        >
          <el-form :model="noteEditForm" label-width="140px">
            <el-form-item label="名称"
              ><el-input v-model="noteEditForm.label"></el-input
            ></el-form-item>
            <el-form-item label="类型"
              ><el-input v-model="noteEditForm.type"></el-input
            ></el-form-item>
            <el-form-item label="群组"
              ><el-input v-model="noteEditForm.cluster" disabled></el-input
            ></el-form-item>
            <el-form-item label="形状">
              <el-input v-model="noteEditForm.shape"></el-input>
            </el-form-item>
            <el-form-item label="半径"
              ><el-input v-model="noteEditForm.radius"></el-input
            ></el-form-item>

            <el-form-item label="透明度"
              ><el-input v-model="noteEditForm.alpha"></el-input
            ></el-form-item>
            <el-form-item label="填充颜色"
              ><el-input v-model="noteEditForm.fillColor"></el-input
            ></el-form-item>
            <el-form-item label="字体颜色"
              ><el-input v-model="noteEditForm.fontColor"></el-input
            ></el-form-item>
            <!--     <el-form-item label="wrapText"
          ><el-input v-model="noteEditForm.wrapText"></el-input
        ></el-form-item> -->
            <!--      <el-form-item label="lineDash"
          ><el-input v-model="noteEditForm.lineDash"></el-input
        ></el-form-item> -->
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="noteEditDialog = false">取 消</el-button>
              <el-button type="primary" @click="nodeEditClick()"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>

        <div>
          <!-- 添加节点 -->
          <el-dialog
            title="添加节点"
            :visible.sync="nodeAddDialog"
            width="50%"
            @close="nodeAddDialogClose()"
            :close-on-click-modal="false"
          >
            <el-form :model="nodeAddForm" label-width="140px">
              <el-form-item label="节点名称">
                <el-input v-model="nodeAddForm.label"></el-input>
              </el-form-item>
              <el-form-item label="大小">
                <el-input v-model="nodeAddForm.size"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="nodeAddDialog = false">取 消</el-button>
                <el-button type="primary" @click="nodeAddClick()"
                  >确 定</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>

        <!-- 编辑连接 -->
        <el-dialog
          title="编辑连接"
          :visible.sync="linkEditDialog"
          width="50%"
          :close-on-click-modal="false"
        >
          <el-form :model="linkEditForm" label-width="140px">
            <el-form-item label="label">
              <!-- <el-badge :value="linkEditForm.type" class="item"></el-badge> -->
              <el-input v-model="linkEditForm.label"></el-input
            ></el-form-item>
            <el-form-item label="lineType">
              <el-select
                v-model="linkEditForm.checkedLineType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in linkEditForm.lineTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!--  <el-form-item label="lineDash"
          ><el-input v-model="linkEditForm.lineDash"></el-input
        ></el-form-item> -->
            <el-form-item label="fontColor"
              ><el-input v-model="linkEditForm.fontColor"></el-input
            ></el-form-item>
            <el-form-item label="alpha"
              ><el-input v-model="linkEditForm.alpha"></el-input
            ></el-form-item>
            <el-form-item label="colorType"
              ><el-input v-model="linkEditForm.colorType"></el-input
            ></el-form-item>
            <!-- <el-form-item label="自定义信息"
          ><el-input v-model="linkEditForm.properties"></el-input
        ></el-form-item>
 -->
            <el-form-item label="起点">
              <el-input v-model="linkEditForm.source.label"></el-input>
            </el-form-item>
            <el-form-item label="终点">
              <el-input v-model="linkEditForm.target.label"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="linkEditDialog = false">取 消</el-button>
              <el-button type="primary" @click="linkEditClick()"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
        <!-- 连接配置 -->
        <el-dialog
          title="连接样式配置"
          :visible.sync="linkConfigDialog"
          width="50%"
          :close-on-click-modal="false"
        >
          <el-form>
            <!-- getLineTypeMap -->
            <el-form-item label="连线类型下拉"> </el-form-item>
            <el-form-item label="连线宽度"> </el-form-item>
            <el-form-item label="连线箭头flag"> </el-form-item>
            <el-form-item label="连线颜色"> </el-form-item>
            <el-form-item label="连线标签"> </el-form-item>
            <el-form-item label="字体样式"> </el-form-item>
            <el-form-item label="字体颜色"> </el-form-item>
            <el-form-item label="虚线flag"> </el-form-item>
            <el-form-item label="连线底色"> </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="linkConfigDialog = false"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>

      <!-- ============================================= 布局操作栏dialog域 ============================================= -->

      <div>
        <!-- 布局设置dialog -->
        <el-dialog title="图布局算法设置" :visible.sync="graphLayoutDialog">
          <el-form ref="graphLayoutForm">
            <!-- 布局算法 -->
            <el-form-item label="布局算法">
              <el-cascader
                placeholder="请选择布局算法"
                v-model="graphLayoutForm.layoutType"
                :options="graphLayoutForm.layoutTypes"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChangeLayoutType"
              ></el-cascader>
            </el-form-item>
          </el-form>
          <el-input
            type="textarea"
            :rows="6"
            v-model="graphLayoutForm.layoutConfig"
          ></el-input>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="graphLayoutClick()"
              >开始布局</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- ============================================= 社区发现操作栏dialog域 ============================================= -->
      <!-- 社区发现dialog -->
      <div>
        <el-dialog title="社区划分算法设置" :visible.sync="clusterLayoutDialog">
          <!-- 聚类算法 -->
          <el-form ref="clusterLayoutForm">
            <el-form-item label="聚类算法">
              <el-select
                v-model="clusterLayoutForm.clusterType"
                placeholder="请选择聚类算法"
              >
                <el-option
                  v-for="item in clusterLayoutForm.clusterTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="划分效果">
              <el-select
                v-model="clusterLayoutForm.clusterResultType"
                placeholder="请选择划分效果"
              >
                <el-option
                  v-for="item in clusterLayoutForm.clusterResultTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="clusterLayoutClick()"
              >执行社区划分</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- ============================================= 筛选操作栏dialog域 ============================================= -->
      <div>
        <!-- 筛选dialog -->
        <el-dialog title="实体和关系过滤" :visible.sync="filterDialogVisible">
          <el-form ref="filterForm">
            <el-form-item label="实体类型过滤"> </el-form-item>
            <el-form-item label="关系类型过滤"></el-form-item>
            <el-form-item label="inLinks数量过滤"></el-form-item>
            <el-form-item label="关系权重过滤"></el-form-item>
            <el-form-item label="实体名称过滤"></el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="filterDialogVisible = false"
              >过滤</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- ============================================= 配置操作栏dialog域 ============================================= -->
      <div>
        <!-- 图显示设置 -->
        <el-dialog
          title="图显示设置"
          :visible.sync="graphConfigDialog"
          width="50%"
          :close-on-click-modal="false"
        >
          <el-tabs>
            <el-tab-pane label="JSON配置">
              <el-input
                type="textarea"
                :rows="10"
                v-model="graphConfigJSON"
              ></el-input>
            </el-tab-pane>
            <el-tab-pane label="节点设置" name="nodConfig" disabled>
              <el-form>
                <el-form-item label="节点类型"></el-form-item>
                <el-form-item label="节点大小"></el-form-item>
                <el-form-item label="节点颜色"></el-form-item>
                <el-form-item label="字体大小"></el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane
              label="连接配置"
              name="linkConfig"
              disabled
            ></el-tab-pane>
          </el-tabs>
          <template #footer>
            <span class="dialog-footer">
              <!-- visgraph.getGraphStatistic() -->
              <el-button @click="graphConfigDialog = false">取 消</el-button>
              <el-button type="primary" @click="graphConfigClick"
                >修改配置</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>

      <!-- ============================================= 全局右键菜单操作栏区域 ============================================= -->
      <div>
        <!-- 节点操作菜单 -->
        <div id="nodeMenuDialogId" class="nodeMenuDialog">
          <div class="power">
            <button @click="openNodeInfoDialog()">节点信息</button>
            <button @click="openNodeEditDialog()">编辑节点</button>

            <el-popover placement="top" :width="160" ref="nodePopoverRef">
              <p>该操作会永久删除节点,您确定吗?</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="noteDeletePopoverClose()"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="noteDeleteClick()"
                  >确定</el-button
                >
              </div>
              <template #reference>
                <button>删除节点</button>
              </template>
            </el-popover>

            <button @click="nodeHide()">隐藏节点</button>
            <button @click="linkCreating()">节点连接</button>
            <button @click="highlightRelatives()">高亮关联节点</button>
            <button @click="outNodesContract()">收起子节点</button>
            <button @click="outNodesExpanded()">展开子节点</button>
          </div>
          <button @click="nodeMenuDialogClose()">取消</button>
        </div>

        <!-- 连接操作菜单 -->
        <div id="linkMenuDialogId" class="linkMenuDialog">
          <button @click="openLinkEditDialog()">编辑连线</button>

          <el-popover placement="top" :width="160" ref="linkPopoverRef">
            <p>该操作会永久删除连线,您确定吗?</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="linkPopoverClose()"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="linkDeleteClick()"
                >确定</el-button
              >
            </div>
            <template #reference>
              <button>删除连线</button>
            </template>
          </el-popover>
          <button @click="linkHide()">隐藏连线</button>
          <button @click="openLinkConfigDialog()">连线配置</button>
          <button @click="closeLinkMenuDialog()">取消</button>
        </div>

        <!-- 全局右键操作菜单 -->
        <div id="globalMenuDialogId" class="globalMenuDialog">
          <button @click="saveAsJSON()">保存数据</button>
          <button @click="saveAsPNG()">保存图片</button>
        </div>
      </div>
    </el-header>
    <el-main>
      <!-- ============================================= 绘图显示区域 ============================================= -->
      <div
        class="canvasMain"
        v-loading="loading"
        :id="canvasMainId"
        @contextmenu.prevent="globalClickedDispatch"
      ></div>
    </el-main>
    <!-- ============================================= 底部工具栏 ============================================= -->
    <el-footer>
      <el-row>
        <el-col :span="20">
          <el-button
            type="text"
            icon="el-icon-zoom-in"
            @click="footBarClick('zoomIn')"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-zoom-out"
            @click="footBarClick('zoomOut')"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-location"
            @click="footBarClick('zoom1')"
          ></el-button>
          <!-- rotateGraph -->
          <el-button
            type="text"
            icon="el-icon-refresh-left"
            @click="footBarClick('rotateLeft')"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-refresh-right"
            @click="footBarClick('rotateRight')"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-folder-opened"
            @click="footBarClick('showText')"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-folder"
            @click="footBarClick('hideText')"
          ></el-button>
        </el-col>
        <el-col :span="4">
          <el-button
            type="text"
            icon="el-icon-s-data"
            @click="statisticsClick()"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-files"
            @click="saveAsJSON()"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-camera"
            @click="saveAsPNG()"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-view"
            @click="footBarClick('miniMap')"
          ></el-button>
        </el-col>
      </el-row>

      <!-- ============================================= 底部操作栏dialog域 ============================================= -->
      <div>
        <!-- 信息统计 -->
        <el-dialog
          title="图统计信息"
          :visible.sync="statisticsViewDialog"
          width="50%"
          :close-on-click-modal="false"
        >
          <el-input type="textarea" :rows="6" v-model="graphStatics" disabled>
          </el-input>
        </el-dialog>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import VisGraph from '@/plugins/visgraph/visgraph.js';
import LayoutFactory from '@/plugins/visgraph/layoutFactory.js';
import {
  defaultConfig,
  graphLayoutTypes,
  graphClusterTypes,
} from './config.js';
import ClusterFactory from '@/plugins/visgraph/clusterFactory.js';
import { defaultData } from './data/hongloumeng.js';
import { merge } from 'lodash';

export default {
  props: {
    cusGraphConfig: {},
    cusGraphData: [],
    canvasMainId: {
      type: String,
      required: false,
      default() {
        return 'graph' + +new Date() + ((Math.random() * 1000).toFixed(0) + '');
      },
    },
  },
  mounted() {
    const c = merge(defaultConfig, this.cusGraphConfig);
    this.graphConfig = JSON.parse(JSON.stringify(c));
    const d = this.cusGraphData || defaultData;
    this.graphData = JSON.parse(JSON.stringify(d));
    this.currentGraphData = this.graphData;
    this.initCanvas();
  },
  data() {
    return {
      loading: true,
      // ============================================= visGraph配置 =============================================
      // visGraph实例
      visGraph: null,
      // visGraph设置信息
      graphConfig: null,
      // visGraph数据集
      graphData: {
        nodes: [],
        links: [],
      },
      currentGraphData: {},
      // =============================================  编辑功能区域 =============================================
      // ============================================= 分析功能区域 =============================================
      //   列表分析dialog
      relationAnalyzeDialog: false,
      relationAnalyzeInput: '',
      relationAnalyzeData: {
        nodes: [],
        links: [],
      },
      //   连接分析dialog
      nLayerRelatesDialog: false,
      nLayerRelatesForm: {
        label: '',
        deepth: 1,
      },
      //   路径分析
      pathAnalyzeDialog: false,
      pathAnalyzeForm: {
        sourceLabel: '',
        targetLabel: '',
        direction: '',
      },
      //   最短路径
      findShortPathDialog: false,
      findShortPathForm: {
        sourceLabel: '',
        targetLabel: '',
        direction: '',
      },
      // 查找节点
      nodeFindDialog: false,
      nodeFindForm: {
        label: 'label',
        value: '贾宝玉',
      },
      // 属性配置
      nodeFindProperties: [
        {
          id: 1,
          label: 'id',
        },
        {
          id: 2,
          label: 'label',
        },
      ],
      //   查找环路
      findNodeCyclePathDialog: false,
      findNodeCyclePathForm: {
        label: '',
      },
      //   节点缩放
      nodeMapSizeByDegreeDialog: false,
      nodeMapSizeByDegreeForm: {
        checkedProp: {},
        props: [
          { label: 'allLinks', value: 'degree' },
          { label: 'outLinks', value: 'outdegree' },
          { label: 'inLinks', value: 'indegree' },
        ],
        min: 5,
        max: 150,
      },
      // 边缩放
      applyLinkWeightDialog: false,
      applyLinkWeightForm: {
        min: 1,
        max: 10,
      },
      nodeInfoDialog: false,
      // nodeInfoForm
      nodeInfoForm: {
        x: null,
        y: null,
        id: null,
        type: null,
        cluster: null,
        radius: null,
        label: null,
        alpha: null,
        fillColor: null,
        shape: null,
        wrapText: null,
        lineDash: null,
        icon: null,
        inLinks: [],
        outLinks: [],
      },
      noteEditDialog: false,
      noteEditForm: {
        x: null,
        y: null,
        id: null,
        type: null,
        cluster: null,
        radius: null,
        label: null,
        alpha: null,
        fillColor: null,
        shape: null,
        wrapText: null,
        lineDash: null,
        icon: null,
        inLinks: [],
        outLinks: [],
      },
      nodeAddDialog: false,
      nodeAddForm: {
        id: '',
        label: '',
        size: '100',
      },
      linkEditDialog: false,
      linkEditForm: {
        id: '',
        type: '',
        label: '',
        lineType: '',
        lineDash: '',
        fontColor: '',
        alpha: '',
        colorType: '',
        properties: {},
        source: {},
        target: {},
        checkedLineType: '',
        lineTypes: [
          { label: 'direct', value: 'direct' },
          { label: 'circle', value: 'circle' },
          { label: 'rect', value: 'rect' },
          { label: 'ellipse', value: 'ellipse' },
          { label: 'star', value: 'star' },
          { label: 'triangle', value: 'triangle' },
          { label: 'polygon', value: 'polygon' },
        ],
      },
      linkConfigDialog: false,
      // ============================================= 布局设置功能区域 =============================================
      //   布局设置dialog
      graphLayoutDialog: false,
      graphLayoutForm: {
        layoutType: '',
        layoutTypes: '',
        layoutConfig: '',
      },
      // ============================================= 社区发现功能区域 =============================================
      //   社区发现设置dialog
      clusterLayoutDialog: false,
      clusterLayoutForm: {
        clusterType: '',
        clusterTypes: [],
        clusterResultType: '',
        clusterResultTypes: [
          { label: '仅颜色区分', value: '0' },
          { label: '区域划分', value: '1' },
        ],
      },
      // ============================================= 过滤栏功能区域 =============================================
      //   筛选dialog
      filterDialogVisible: false,
      // ============================================= 设置栏功能区域 =============================================
      //   设置dialog
      graphConfigDialog: false,
      graphConfigJSON: '',

      // ============================================= 底部工具栏相关 =============================================
      //   图统计信息dialog
      statisticsViewDialog: false,
      graphStatics: '',
      // ============================================= 全局操作栏相关 =============================================
      // 双击选中的节点信息
      checkedNodeInfo: {
        properties: {},
      },
      // 双击选中的联系信息
      checkedLinkInfo: {},
      // 判断当前是否进行联系知识操作(还存储父节点的ID)
      linkCreatingToNodeId: '',
    };
  },
  methods: {
    // ============================================= 应用基本配置 =============================================
    tryl(name, config, data) {
      console.log('当前处理------------------------' + name);

      let customConfig;
      if (this.isStringified(config)) {
        console.log('---------配置已stringfy');
        customConfig = JSON.parse(config);
      } else if (this.isParsed(config)) {
        console.log('---------配置已parse');
        customConfig = JSON.parse(JSON.stringify(config));
      }
      console.log(customConfig);

      let customData;
      if (this.isStringified(data)) {
        console.log('---------数据已stringfy');
        customData = JSON.parse(data);
      } else if (this.isParsed(data)) {
        console.log('---------数据已parse');
        customData = JSON.parse(JSON.stringify(data));
      }
      console.log(customData);
      console.log('正在离库------------------------' + name);
    },
    // 配置初始化
    async initCanvas() {
      // this.tryl("initCanvas", this.cusGraphConfig, this.cusGraphData);
      // await this.$emit("init");
      // await this.tryl("initCanvas2", this.cusGraphConfig, this.cusGraphData);
      this.envPreset();
      this.createCanvas();
      this.refreshCanvas();
    },
    envPreset() {
      let timer; // 用于取消默认鼠标事件,自定义鼠标行为
      const self = this;
      this.graphConfig.node.onClick = function (event, node) {
        const tevent = event;
        const tnode = node;
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
          self.clickedOnNode(tevent, tnode);
        }, 300);
      };
      this.graphConfig.link.onClick = function (event, link) {
        const tevent = event;
        const tlink = link;
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
          self.clickedOnLink(tevent, tlink);
        }, 300);
      };

      /*  this.graphConfig.node.onMouseDown = function (event, node) {
        timer && clearTimeout(timer);
        timer = setTimeout(function (event, node) {
          self.checkedNodeInfo = null;
          event.stopPropagation();
        }, 300);
      }; */

      this.graphConfig.node.ondblClick = function (event, node) {
        timer && clearTimeout(timer);
        self.checkedNodeInfo = node;
        timer = setTimeout(
          (event, node) => self.linkCreating(event, node),
          300
        );
      };
      this.graphConfig.link.ondblClick = function (event, link) {
        timer && clearTimeout(timer);
        self.checkedLinkInfo = link;
        timer = setTimeout(
          (event, link) => self.openLinkEditDialog(event, link),
          300
        );
      };

      // BUGFIX 解决seleted之后不操作 节点/连接 时无法取消selected状态的问题
      // this.graphConfig.node.onMouseOut = function (event, node) {        this.visGraph.currentNode = null;      };
      this.graphConfig.noElementClick = function (event, visgraph) {
        self.checkedNodeInfo = null;
        self.checkedLinkInfo = null;
        self.visGraph.refresh();
      };
    },
    createCanvas() {
      // if (this.visGraph === null || this.graphConfigJSON) {
      this.visGraph = new VisGraph(
        document.getElementById(this.canvasMainId),
        this.graphConfig
      );
      // }
    },
    refreshCanvas() {
      this.graphLayoutForm.layoutTypes = graphLayoutTypes;
      this.clusterLayoutForm.clusterTypes = graphClusterTypes;
      this.visGraph.clearAll();
      this.visGraph.drawData(this.currentGraphData);
      this.relationAnalyzeData = this.visGraph.getGraphData();
      this.loading = false;
      this.layoutCanvas();
    },
    // 执行布局算法
    layoutCanvas() {
      // console.log(this.visGraph.config);
      // console.log(this.visGraph.defaultConfig);
      // console.log(new LayoutFactory(this.visGraph.getVisibleData()).config);
      const graphData = this.visGraph.getVisibleData();
      // 选择布局算法类型
      const layoutType = this.layoutType || 'fastFR';
      const layout = new LayoutFactory(graphData).createLayout(layoutType);
      const layoutConfig = layout.getConfig();
      // console.log(layoutConfig);
      this.graphLayoutForm.layoutConfig = JSON.stringify(layoutConfig);

      // 初始化布局算法参数或者重设布局参数
      /*
       * 说明：
       * 1.layout.initAlgo() 是使用默认的布局参数
       * 2、如果要修改算法参数，需要重设布局参数，如下：
       * const config = {'froce':0.95,'linkDistance':150,'linkStrength':0.09,'charge':-300,gravity:0.015};
       * layout.resetConfig(config);
       *
       */
      layout.initAlgo();
      let i = 0;
      while (i++ < 10) {
        layout.runLayout();
      }

      /* var loopName = null;
      function loop() {
        cancelAnimationFrame(loopName);
        var i = 0;
        while (i++ < 10) {
          layout.runLayout();
        }
        loopName = requestAnimationFrame(loop);
      }
      loopName = requestAnimationFrame(loop); */

      this.loading = false;
    },
    isStringified(str) {
      try {
        var obj = JSON.parse(str);
        if (obj && typeof obj === 'object' && obj !== null) {
          return true;
        }
      } catch (err) {
        return false;
      }
    },
    isParsed(str) {
      try {
        var obj = JSON.stringify(str);
        if (obj && typeof obj === 'string' && obj !== null) {
          return true;
        }
      } catch (err) {
        return false;
      }
    },
    // ============================================= heaer布局区域 =============================================
    handleToolbarClick(tab, event) {
      if (tab.paneName === 'layoutOps') {
        this.graphLayoutDialog = true;
      } else if (tab.paneName === 'clusterOps') {
        this.clusterLayoutDialog = true;
      } else if (tab.paneName === 'filterOps') {
        this.filterDialogVisible = true;
      } else if (tab.paneName === 'configOps') {
        this.graphConfigDialog = true;
      } else {
        console.log('clicked' + tab.paneName);
        // console.log(tab, event);
      }
    },
    handleChangeLayoutType(value) {
      console.log(value);
    },
    handleChangeClusterType(value) {
      console.log(value);
    },
    // ============================================= 编辑操作栏区域 =============================================
    editorOpClick(operation) {
      if (
        !(
          operation === 'allSelect' ||
          operation === 'hideIsolatedNodes' ||
          operation === 'clearAll'
        )
      ) {
        this.$message.success(
          '新手指导js未引入,除少数功能外需要先在图中选中节点'
        );
      }
      this.visGraph.rightMenuOprate(operation);
    },
    // ============================================= 分析相关功能 =============================================
    // 关系分析过滤器
    relationAnalyzeFilter(value, row, column) {
      const property = column['property'];
      // value = this.relationAnalyzeInput;
      return row[property] === value;
    },
    // N层路径
    nLayerRelatesClick() {
      this.nLayerRelatesDialog = false;
      this.visGraph.nLayerRelates(
        this.nLayerRelatesForm.label,
        this.nLayerRelatesForm.deepth
      );
    },
    // 路径分析
    pathAnalyzeClick() {
      this.pathAnalyzeDialog = false;
      this.visGraph.pathAnalyze(
        this.pathAnalyzeForm.sourceLabel,
        this.pathAnalyzeForm.targetLabel
      );
    },
    // 最短路径
    findShortPathClick() {
      this.findShortPathDialog = false;
      this.visGraph.findShortPath(
        this.findShortPathForm.sourceLabel,
        this.findShortPathForm.targetLabel
      );
    },
    // 查找节点
    findNodeClick() {
      if (!this.nodeFindForm.label || !this.nodeFindForm.value) {
        this.$message.error('请先选择属性、标签');
        return;
      }
      const node = this.visGraph.findNodeByAttr(
        this.nodeFindForm.label,
        this.nodeFindForm.value
      );

      if (node) {
        this.visGraph.focusTargetEle(node);
        // this.visGraph.selectRelate(node);
        this.visGraph.highLightNeiberNodes(node, 0.1);
        this.nodeFindDialog = false;
      } else {
        this.$message.error('未找到节点,请检查输入是否正确');
      }
    },
    // 关闭查找节点dialog
    nodeFindDialogClose() {
      this.nodeFindForm.label = '';
      this.nodeFindForm.value = '';
      this.nodeFindDialog = false;
    },

    // 查找环路
    findNodeCyclePathClick() {
      this.findNodeCyclePathDialog = false;

      this.$message.error('API被丢弃了,待修复');
      // this.visGraph.findNodeCyclePath(this.findNodeCyclePathForm.label);
    },
    // 节点缩放
    nodeMapSizeByDegreeClick() {
      this.nodeMapSizeByDegreeDialog = false;
      this.visGraph.nodeMapSizeByDegree(
        this.nodeMapSizeByDegreeForm.checkedProp,
        [this.nodeMapSizeByDegreeForm.min, this.nodeMapSizeByDegreeForm.max]
      );
    },
    // 边缩放
    applyLinkWeightClick() {
      this.applyLinkWeightDialog = false;
      this.visGraph.applyLinkWeight([
        this.applyLinkWeightForm.min,
        this.applyLinkWeightForm.max,
      ]);
    },
    requireNodeChecked() {
      if (!this.checkedNodeInfo) {
        this.$message.error('请先选中一个节点');
      }
    },
    // 节点信息dialog
    openNodeInfoDialog() {
      this.requireNodeChecked();
      this.nodeInfoForm = this.checkedNodeInfo;
      this.nodeMenuDialogClose();
      this.nodeInfoDialog = true;
    },
    // 打开编辑节点dialog
    openNodeEditDialog() {
      this.requireNodeChecked();
      this.noteEditForm = this.checkedNodeInfo;
      this.nodeMenuDialogClose();
      this.noteEditForm.name = this.checkedNodeInfo.label;
      this.noteEditForm.image = this.checkedNodeInfo.image || '';
      this.noteEditDialog = true;
    },
    // 编辑节点操作
    nodeEditClick() {
      this.requireNodeChecked();
      // this.checkedNodeInfo
      this.visGraph.resetNodeInfo(this.noteEditForm);
      // this.visGraph.updateNodeLabel(this.noteEditForm.id, this.noteEditForm.label);
      this.noteEditDialog = false;
    },
    async nodeAddClick() {
      var node = {
        id: new Date().getTime() + '',
        label: this.nodeAddForm.label,
        size: this.nodeAddForm.size,
        x: Math.round(Math.random() * 1000),
        y: Math.round(Math.random() * 600),
        shape: 'circle',
      };
      await this.$emit('nodeEvent', 'add', node);
      this.visGraph.addNode(node);
      this.nodeAddDialogClose();
    },
    // 关闭添加节点dialog
    nodeAddDialogClose() {
      this.nodeAddDialog = false;
      this.nodeAddForm = { id: '', label: '', size: '' };
    },
    noteDeletePopoverClose() {
      this.nodeMenuDialogClose();
      this.$refs.nodePopoverRef.doClose();
    },
    noteDeleteClick() {
      // TODO 更新后台数据
      this.nodeHide();
    },
    nodeHide() {
      this.requireNodeChecked();
      let node = this.visGraph.findNode(this.checkedNodeInfo.label);
      this.visGraph.deleteNode(node);
      this.visGraph.showAllNode();
      this.nodeMenuDialogClose();
      this.noteDeletePopoverClose();
    },
    // 开启节点连接操作
    linkCreating() {
      this.requireNodeChecked();
      this.visGraph.begainAddLine(this.checkedNodeInfo);
      this.linkCreatingToNodeId = this.checkedNodeInfo.id;
      this.nodeMenuDialogClose();
    },
    // 高亮关联节点
    highlightRelatives() {
      this.requireNodeChecked();
      this.visGraph.highLightNeiberNodes(this.visGraph.currentNode, 0.1);
      this.nodeMenuDialogClose();
    },
    // 收起子节点
    outNodesContract() {
      this.requireNodeChecked();
      // 应用比较苛刻，仅能收缩无其它关联的子节点
      this.nodeMenuDialogClose();
      this.visGraph.contract(this.visGraph.currentNode);
    },
    // 展开子节点
    outNodesExpanded() {
      this.requireNodeChecked();
      // 应用比较苛刻，仅能展开无其它关联的子节点
      this.nodeMenuDialogClose();
      this.visGraph.expanded(this.visGraph.currentNode);
    },
    openLinkEditDialog() {
      this.closeLinkMenuDialog();
      this.linkEditForm = this.checkedLinkInfo;
      this.linkEditDialog = true;
    },
    // 编辑连接
    async linkEditClick() {
      await this.$emit(
        'linkEvent',
        'edit',
        this.checkedLinkInfo,
        this.linkEditForm
      );
      this.visGraph.deleteLink(this.linkEditForm);
      this.linkEditForm.lineType = this.linkEditForm.checkedLineType;
      if (!this.linkEditForm.id) {
        this.linkEditForm.id = new Date().getTime() + '';
      }
      this.visGraph.addEdge(this.linkEditForm);
      this.linkEditDialog = false;
    },
    // 关闭删除连接dialog
    linkPopoverClose() {
      this.closeLinkMenuDialog();
      this.$refs.linkPopoverRef.doClose();
    },
    linkDeleteClick() {
      // TODO 后台数据删除
      this.linkHide();
    },
    linkHide() {
      this.visGraph.deleteLink(this.checkedLinkInfo);
      this.visGraph.showAllNode();
      this.closeLinkMenuDialog();
      this.linkPopoverClose();
    },
    linkConfig() {
      this.closeLinkMenuDialog();
    },
    // 连接配置
    openLinkConfigDialog() {
      this.closeLinkMenuDialog();
      this.linkConfigDialog = true;
    },
    // ============================================= 布局设置功能区域 =============================================

    graphLayoutClick() {
      this.graphLayoutDialog = false;
      this.layoutType = this.graphLayoutForm.layoutType[1];
      this.refreshCanvas();
    },
    // ============================================= 社区发现功能区域 =============================================
    clusterLayoutClick() {
      this.clusterLayoutDialog = false;
      this.visGraph.clearClusters();
      const graphData = this.visGraph.getVisibleData();
      const clusterLayout = new ClusterFactory(graphData).createClutser(
        this.clusterLayoutForm.clusterType
      );
      if (clusterLayout) {
        var e = clusterLayout.applay();
        if ('1' === this.clusterLayoutForm.clusterResultType) {
          this.visGraph.addClusterContainer(e);
        }
        this.visGraph.refresh();
      }
    },
    // ============================================= 配置菜单栏相关操作 =============================================
    graphConfigClick() {
      this.graphConfigDialog = false;
      this.$message.error('要重新设计');
      // const config = JSON.parse(this.graphConfigJSON);
      this.createCanvas();
      this.refreshCanvas();
    },
    // ============================================= 底部菜单栏相关操作 =============================================
    footBarClick(operation) {
      if (
        operation === 'zoomIn' ||
        operation === 'zoomOut' ||
        operation === 'zoom1'
      ) {
        this.visGraph.setZoom(operation);
      } else if (operation === 'rotateLeft') {
        this.visGraph.rotateGraph(-5);
      } else if (operation === 'rotateRight') {
        this.visGraph.rotateGraph(5);
      } else if (operation === 'showText') {
        // this.visGraph.showNodeLabel(true);
        this.visGraph.showLinkLabel(true);
      } else if (operation === 'hideText') {
        // this.visGraph.showNodeLabel(false);
        this.visGraph.showLinkLabel(false);
      } else if (operation === 'miniMap') {
        this.visGraph.showOverView(true);
      } else {
        this.$message.error('未定义相关操作');
      }
    },
    statisticsClick() {
      const statics = this.visGraph.getGraphStatistic();
      // this.graphStatics = statics;
      this.graphStatics = JSON.stringify(statics);
      this.statisticsViewDialog = true;
    },
    saveAsJSON() {
      this.visGraph.exportJsonFile();
      this.closeGlobalMenuDialog();
    },
    saveAsPNG() {
      this.visGraph.saveImage(5000, 5000, 'png');
      this.closeGlobalMenuDialog();
    },
    // ============================================= 节点相关操作 =============================================
    // 关闭节点dialog
    nodeMenuDialogClose() {
      let nodeMenuDialog = document.getElementById('nodeMenuDialogId');
      nodeMenuDialog.style.display = 'none';
    },

    // ============================================= 全局配置分发 =============================================
    globalClickedDispatch(event) {
      if (event.button === 2) {
        this.nodeMenuDialogClose();
        this.closeLinkMenuDialog();
        if (this.visGraph.currentLink) {
          this.checkedLinkInfo = this.visGraph.currentLink;
          this.linkEditForm.checkedLineType =
            this.visGraph.currentLink.lineType;
          this.linkMenuDialogOpen(event, this.visGraph.currentLink);
        } else if (this.visGraph.currentNode) {
          this.checkedNodeInfo = this.visGraph.currentNode;
          this.nodeMenuDialogOpen(event, this.visGraph.currentNode);
        } else {
          this.checkedNodeInfo = null;
          this.checkedLinkInfo = null;
          this.globalMenuDialogOpen(event);
        }
      }
    },
    clickedOnNode(event, node) {
      this.checkedLinkInfo = null;
      if (this.linkCreatingToNodeId) {
        this.linkCreatingToNodeId = '';
      } else {
        this.checkedNodeInfo = node;
        return false;
      }
    },
    // 鼠标点击在连接上
    clickedOnLink(event, link) {
      this.checkedLinkInfo = link;
      this.visGraph.currentNode == null;
    },
    // 显示知识操作栏(鼠标双击节点)
    nodeMenuDialogOpen(event, node) {
      let nodeMenuDialog = document.getElementById('nodeMenuDialogId');
      nodeMenuDialog.style.left = event.clientX + 'px';
      nodeMenuDialog.style.top = event.clientY + 'px';
      nodeMenuDialog.style.display = 'block';
      this.checkedNodeInfo = node;
      event.stopPropagation();
    },
    // 打开知识联系操作栏(双击连线)
    linkMenuDialogOpen(event, link) {
      let linkMenuDialog = document.getElementById('linkMenuDialogId');
      linkMenuDialog.style.left = event.clientX + 'px';
      linkMenuDialog.style.top = event.clientY + 'px';
      linkMenuDialog.style.display = 'block';
    },
    // 关闭连接dialog
    closeLinkMenuDialog() {
      let linkMenuDialog = document.getElementById('linkMenuDialogId');
      linkMenuDialog.style.display = 'none';
    },
    globalMenuDialogOpen(event) {
      let globalMenuDialog = document.getElementById('globalMenuDialogId');

      globalMenuDialog.style.left = event.clientX + 'px';
      globalMenuDialog.style.top = event.clientY + 'px';
      globalMenuDialog.style.display = 'block';
    },
    // 关闭连接dialog
    closeGlobalMenuDialog() {
      let globalMenuDialog = document.getElementById('globalMenuDialogId');
      globalMenuDialog.style.display = 'none';
    },
  },
};
</script>

<style scoped lang="less">
// ============================================= canvas样式区域 =============================================
/* 整个组件的根组件样式 */
.canvasMain {
  height: 800px;
  width: 1600px;
  margin: 30px 0px;
  padding: 0;
}

// ============================================= 分析操作栏样式区域 =============================================
/* 节点操作栏样式 */
.nodeMenuDialog {
  position: absolute;
  width: 120px;
  z-index: 5;
  display: none;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.nodeMenuDialog button {
  display: block;
  width: 120px;
  background: white;
  border: none;
  margin: 5px 2px;
}
.nodeMenuDialog button:hover {
  background: skyblue;
}
.nodeMenuDialog button:focus {
  outline: 0;
}
/* 节点联系操作栏样式 */
.linkMenuDialog {
  position: absolute;
  width: 80px;
  z-index: 5;
  display: none;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.linkMenuDialog button {
  display: block;
  width: 80px;
  background: white;
  border: none;
  margin: 5px 2px;
}
.linkMenuDialog button:hover {
  background: skyblue;
}
.linkMenuDialog button:focus {
  outline: 0;
}

// ============================================= 全局操作栏样式区域 =============================================
.globalMenuDialog {
  position: absolute;
  width: 80px;
  z-index: 5;
  display: none;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.globalMenuDialog button {
  display: block;
  width: 80px;
  background: white;
  border: none;
  margin: 5px 2px;
}
.globalMenuDialog button:hover {
  background: skyblue;
}
.globalMenuDialog button:focus {
  outline: 0;
}
// ============================================= 自定义样式区域 =============================================
.warning {
  color: #e6a23c;
}
.danger {
  color: #f56c6c;
}
</style>
